<!-- 对 button 组件的编辑 -->
<template>
  <div class="numcount-edit" v-if="dialogShow" style="width:840px;">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础设置" name="1">
            <TextAlign :defValue="data.config.textAlign" :chgValue="(d)=>{data.config.textAlign = d}" />
            <el-form :label-width="formLabelWidth">
              <el-form-item label="动画速度" style="margin-bottom:0px;">
                <el-select size="mini" v-model="data.config.duration" placeholder="请选择" style="width:193px;">
                  <el-option :label="'1'" :value="1"></el-option>
                  <el-option :label="'2'" :value="2"></el-option>
                  <el-option :label="'3'" :value="3"></el-option>
                  <el-option :label="'4'" :value="4"></el-option>
                  <el-option :label="'5'" :value="5"></el-option>
                  <el-option :label="'6'" :value="6"></el-option>
                  <el-option :label="'7'" :value="7"></el-option>
                  <el-option :label="'8'" :value="8"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="数字设置" name="2">
            <div>
              <el-row>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="开始数字" style="margin-bottom:0px;">
                      <el-input size="mini" type="number" v-model="data.num.startVal" min="0" max="9223372036854775807" placeholder="" style="width:193px;" @blur="dataBlurStartVal"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="结束数字" style="margin-bottom:0px;">
                      <el-input size="mini" type="number" v-model="data.num.endVal" min="0" max="9223372036854775807" placeholder="" style="width:193px;" @blur="dataBlurEndVal"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth">
                    <el-form-item label="小数位数" style="margin-bottom:0px;">
                      <el-select size="mini" v-model="data.num.decimals" placeholder="请选择" style="width:193px;">
                        <el-option :label="'0'" :value="0"></el-option>
                        <el-option :label="'1'" :value="1"></el-option>
                        <el-option :label="'2'" :value="2"></el-option>
                        <el-option :label="'3'" :value="3"></el-option>
                        <el-option :label="'4'" :value="4"></el-option>
                        <el-option :label="'5'" :value="5"></el-option>
                        <el-option :label="'6'" :value="6"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="千位分隔符" style="margin-bottom:0px;">
                      <el-input size="mini" v-model="data.num.separator" maxlength="50" placeholder="" style="width:193px;"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="前缀" style="margin-bottom:0px;">
                      <el-input size="mini" v-model="data.num.prefix" maxlength="50" placeholder="" style="width:193px;"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="12">
                  <el-form :label-width="formLabelWidth" @submit.native.prevent>
                    <el-form-item label="后缀" style="margin-bottom:0px;">
                      <el-input size="mini" v-model="data.num.suffix" maxlength="50" placeholder="" style="width:193px;"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <Color :defValue="data.num.color" :chgValue="(d)=>{data.num.color = d}" />
              <FontFamily :defValue="data.num.fontFamily" :chgValue="(d)=>{data.num.fontFamily = d}" />
              <FontSize :defValue="data.num.fontSize" :chgValue="(d)=>{data.num.fontSize = d}" />
              <FontWeight :defValue="data.num.fontWeight" :chgValue="(d)=>{data.num.fontWeight = d}" />
              <FontStyle :defValue="data.num.fontStyle" :chgValue="(d)=>{data.num.fontStyle = d}" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="上下标设置" name="3">
            <div>
              <el-form :label-width="formLabelWidth" @submit.native.prevent>
                <el-form-item label="内容" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.subsup.text" maxlength="200" placeholder="" style="width:193px;"></el-input>
                </el-form-item>
              </el-form>
              <el-form :label-width="formLabelWidth">
                <el-form-item label="显示位置" style="margin-bottom:0px;">
                  <el-radio-group size="mini" v-model="data.subsup.position">
                    <el-radio :label="0">下标</el-radio>
                    <el-radio :label="1">上标</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <Color :defValue="data.subsup.color" :chgValue="(d)=>{data.subsup.color = d}" />
              <FontFamily :defValue="data.subsup.fontFamily" :chgValue="(d)=>{data.subsup.fontFamily = d}" />
              <FontSize :defValue="data.subsup.fontSize" :chgValue="(d)=>{data.subsup.fontSize = d}" />
              <FontWeight :defValue="data.subsup.fontWeight" :chgValue="(d)=>{data.subsup.fontWeight = d}" />
              <FontStyle :defValue="data.subsup.fontStyle" :chgValue="(d)=>{data.subsup.fontStyle = d}" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="描述文字设置" name="4">
            <div>
              <el-form :label-width="formLabelWidth" @submit.native.prevent>
                <el-form-item label="内容" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.dectext.text" maxlength="1000" placeholder="" style="width:650px;"></el-input>
                </el-form-item>
              </el-form>
              <TextAlign :defValue="data.dectext.textAlign" :chgValue="(d)=>{data.dectext.textAlign = d}" />
              <Color :defValue="data.dectext.color" :chgValue="(d)=>{data.dectext.color = d}" />
              <FontFamily :defValue="data.dectext.fontFamily" :chgValue="(d)=>{data.dectext.fontFamily = d}" />
              <FontSize :defValue="data.dectext.fontSize" :chgValue="(d)=>{data.dectext.fontSize = d}" />
              <FontWeight :defValue="data.dectext.fontWeight" :chgValue="(d)=>{data.dectext.fontWeight = d}" />
              <FontStyle :defValue="data.dectext.fontStyle" :chgValue="(d)=>{data.dectext.fontStyle = d}" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

  </div>
</template>

<script>
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import Global from '@/config/global.js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTNUMCOUNT, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      this.activeName = '1'
      this.init = true

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '120px',
      name: '计数器',
      bjComponent: null,
      data: null,
      activeName: '1',
      // 是否第一次进来
      init: true
    }
  },
  methods: {
    dataBlurStartVal () {
      if (isNaN(parseFloat(this.data.num.startVal)) || parseFloat(this.data.num.startVal) < 0) {
        this.data.num.startVal = 0
      } else {
        this.data.num.startVal = this.data.num.startVal
      }
    },
    dataBlurEndVal () {
      if (isNaN(parseFloat(this.data.num.endVal)) || parseFloat(this.data.num.endVal) < 0) {
        this.data.num.endVal = 0
      } else {
        this.data.num.endVal = this.data.num.endVal
      }
    },
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
      this.activeName = '1'
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.$refs['settingComponentDialog'].close()
    }
  },
  components: {
    SetDesignDialog,
    Color,
    FontFamily,
    FontSize,
    FontWeight,
    FontStyle,
    TextAlign
  }
}

</script>

<style scoped>
.edit-container-u {
  width: 840px;
  min-height:410px;
  min-height:calc(100vh - 200px);
}
</style>
